
$(document).ready(function() {
    // sales_manager
    $.ajax({
        url: '/ld_data',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: {},
        success: function (data) {
            console.log(data.sales);
            console.log(data.profit);
            var myChart = echarts.init(document.getElementById('data_manager'));
            var option;
            option = {
                // title: {
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                // toolbox: {
                //     show: true,
                //     feature: {
                //         mark: { show: true },
                //         dataView: { show: true, readOnly: false },
                //         restore: { show: true },
                //
                //     }
                // },
                series: [
                    {
                          name: '销售额',
                          type: 'pie',
                          radius: [20, 80],
                          center: ['25%', '50%'],
                          roseType: 'radius',
                          itemStyle: {
                              borderRadius: 5
                          },
                          label: {
                              show: false
                          },
                          emphasis: {
                                label: {
                                    show: true
                                }
                          },
                          data: data.sales
                    },
                    {
                        name: '利润',
                        type: 'pie',
                        radius: [20, 80],
                        center: ['75%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: data.profit
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    });
    // data_provinve
    $.ajax({
        url: '/map_data',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: {},
        success: function (data) {
            console.log(data.province);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('data_province'));
            var option = {
                series: [
                    {
                        name: '销售',
                        type: 'map',
                        geoIndex: 0,
                        data: data.province,
                    },
                ],
                tooltip: {
                    formatter: function (params, ticket, callback) {
                    // 获取该省份的销售和利润数据
                    var sale = params.data.sales;
                    var profit = params.data.profit;
                    // 拼接提示框信息
                    return  params.name +'<br />' + '销售额:' + sale + '<br />' +'利润:' + profit;
                    }
                },
                visualMap: {
                    min: 13664426.68,
                    max: 16635693.99,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],//取值范围的文字
                    inRange: {
                        color: ['#9cb8c9', '#1d7ac4']//取值范围的颜色
                    },
                    show: true,//图注
                    textStyle: {color: '#1d7ac4'},
                },
                geo: {
                    map: 'china',
                    roam: false,//不开启缩放和平移
                    zoom: 1.23,//视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize: '15',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            areaColor: '#94e00e',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 点击事件
            myChart.on('click', function (params) {
                var sale = params.data.sales;
                var profit = params.data.profit;
                alert(params.name +'  销售额:' + sale + '  利润:' +profit);
            });
        }
    });
    // sales_month
    $.ajax({
        url: '/bar_data',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: {},
        success: function (data) {
            console.log(data.month);
            console.log(data.sales);
            console.log(data.profit);
            // 基于准备好的dom，初始化echarts实例
            var myChart_bar = echarts.init(document.getElementById('data_month'));
            var option_bar = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['销售额', '利润'],
                    textStyle: {color: '#fff'},
                  },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                    }
                },
                calculable: true,
                xAxis: [
                {
                    type: 'category',
                    splitLine: {
                      show: false
                    },
                    data: data.month,
                    axisLabel: {
                        show: true,
                        textStyle: {color: '#fff'}
                    },
                    //坐标轴线的颜色以及宽度
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        },
                    },
                }
                ],
                yAxis: [
                {
                    type: 'value',

                    splitLine: {
                      show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {color: '#fff',},
                    },
                    //坐标轴线的颜色以及宽度
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        },
                    },
                }
                ],
                series: [
                {
                    name: '销售额',
                    type: 'bar',
                    data: data.sales,
                    itemStyle: {
                        color: '#1d7ac4'
                    }
                },
                {
                    name: '利润',
                    type: 'bar',
                    data: data.profit,
                    itemStyle: {
                        color: '#94e00e'
                    }
                },
                ],
                grid:{ // 让图表占满容器
                    top:"6px",
                    left:"53px",
                    right:"0px",
                    bottom:"33px"
                },
            };
            myChart_bar.setOption(option_bar);
        }
    });
    // sales_product
    $.ajax({
        url: '/sun_data',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: {},
        success: function (data) {
            console.log(data.detail);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('data_product'));
            var option = {
                series: {
                    type: 'treemap',
                    // type: 'sunburst',  //旭日图
                    // emphasis: {
                    //     focus: 'ancestor'
                    // },
                    data: data.detail,
                    radius: [0, '100%'],
                    label: {
                        show: true,
                        formatter: '{b}'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            formatter: '{c}',
                        }
                    }
                },

            };
            myChart.setOption(option);
        }
    });
    // sales_region
    $.ajax({
        url: '/line_data',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: {},
        success: function (data) {
            console.log(data.region);
            console.log(data.sales);
            console.log(data.profit);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('data_region'));
            var option= {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['销售额','利润'],
                    textStyle: {color: '#fff'}
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {
                            show: false,
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.region,
                    axisLabel: {
                        show: true,
                        textStyle: {color: '#fff'}
                    },
                    //坐标轴线的颜色以及宽度
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {color: '#fff'}
                    },
                    splitLine: {
                        show: false
                    },
                    //坐标轴线的颜色以及宽度
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        },
                    },
                },
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        stack: 'Total',
                        data: data.sales,
                        itemStyle: {
                        color: '#1d7ac4'
                    }
                    },
                    {
                        name: '利润',
                        type: 'line',
                        stack: 'Total',
                        data: data.profit,
                        itemStyle: {
                        color: '#94e00e'
                    }
                    },
                ],
                grid:{ // 让图表占满容器
                    top:"6px",
                    left:"65px",
                    right:"11px",
                    bottom:"33px"
                },
            };
            myChart.setOption(option);
        }
    });
});

